<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>

      {{ userStore.userInfo.name }}
      <div class="btn" @click="btn">点击</div>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello')

import { useUserStore } from "@/store/user";
const userStore = useUserStore()
// 这里传入的是：
// fn：需要加上防抖的函数
// delay：延迟的时间
function debounce(fn: Function, t?: number) {
  let timer: any = null;
  let delay = t || 500
  let immediate = false

  return function () {
    const args = arguments
    if (!immediate) {
      immediate = true
      fn.apply(this, args)
    }
    clearTimeout(timer)
    timer = setTimeout(() => {
      immediate = false
    }, delay)
  }

}
function print() {
  console.log("我被点击了")
}
const btn = debounce(print, 1000)







</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
